<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <script>
        document.createElement('myHero'); // 创建一个自定义元素
    </script>
    <style>
        myHero {
            display: block; /* 块元素 */
            background-color: #ddd;
            padding: 50px;  /* 内边距 */
            font-size: 30px;
        }
    </style>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/learn01.css') }}">
</head>

<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <myHero>这是一个自定义元素。</myHero>
    <!-- 搞个容器排列内部元素-->
    <div class="container">
        <div class="div-normal" style="text-align: center;" >
            <button onclick="playPause()">播放/暂停</button>
            <button onclick="makeBig()">放大</button>
            <button onclick="makeSmall()">缩小</button>
            <br>
            <br>
            <!-- 视频 --->
            <video  id="video01" width="300" height="200">
                <source src="{{ url_for('static',filename='audio/movie.mp4') }}" type="video/mp4">
                <source src="{{ url_for('static',filename='audio/movie.ogg') }}" type="video/ogg">
                <!-- 你的浏览器不支持video标签。 -->
            </video>
        </div>

        <!-- 画布 --->
        <canvas id="myCanvas" width="320" height="300" style="border: 1px solid #000000;">浏览器不支持这个标签</canvas>

        <!-- svg 支持缩放-->
        <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
            <!-- 圆形 --->
            <circle  cx="150" cy="150" r="100" fill="red" class="svg-cir" /> 
            <!-- 五角星 -->
            <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue" class="svg-cir" />
        </svg>

        <div class="div-normal">
            <p>拖动 RUNOOB.COM 图片到矩形框</p>
            <div class='divdrop' id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <img id="drag1" src="{{ url_for('static',filename='img/password.png') }}" draggable="true" ondragstart="drag(event)" width="30" height="30"/>
        </div>

        <div class="div-normal" id="ft">
            <p id="jd">经度:</p>
            <p id="wd">纬度:</p>
            <button onclick="Geolocation()">点我</button>
        </div>
    </div>

    

</body>
 <!-- 将图像的 URL 传递给 JavaScript url_for 只能在HTML 模板中使用 -->
 <script>
    const imageUrl = "{{ url_for('static', filename='img/password.png') }}";
</script>
<script src="{{ url_for('static',filename='js/learn01.js') }}"></script>

</html>